<template>
    <view class="viewport">
        <!-- 顶部背景 -->
        <view class="navbar" :style="{ paddingTop: userStore.safeArea.top + 'px' }">
         <navigator url="/pages/my/my">
           <view  class="back icon-left"></view>
         </navigator>
            <view class="title">个人信息</view>
        </view>
        <scroll-view scroll-y>
             <!-- 头像 -->
          <view class="avatar">

           <image @click="onUploadFile" mode="aspectFill" :src="profile.avatar" />
            <text >点击修改头像</text>
          </view>
          <view class="form">
            <view class="form-item">
              <text class="label">账号</text>
              <!-- 账号名不能修改，用 text 组件展示 -->

              <text>{{ profile.account }}</text>
            </view>
            <view class="form-item">
              <text class="label">昵称</text>
              <!-- 输入框通过 v-model 双向绑定修改数据 -->

             <input v-model="profile.nickname" />
            </view>
            <view class="form-item">
              <text class="label">性别</text>
              <radio-group @change="changeGender">
                <label class="radio">
              <!-- 💥💥 后台给的就是字符串男和女 -->
                  <radio
                    value="男"
                    color="#27ba9b"
                  :checked="profile.gender === '男'"
                  />
                  男
                </label>
                <label class="radio">
                  <radio
                    value="女"
                    color="#27ba9b"
               :checked="profile.gender === '女'"
                  />
                  女
                </label>
              </radio-group>
            </view>
            <view class="form-item">
              <text class="label">出生日期</text>
              <picker 
              mode="date" 
              start="1900-01-01" 
              :end="end" 
              :value="profile.birthday"
              @change=" changeBirthday">
              <view>{{ profile.birthday || "请选择日期" }}</view>
              </picker>
            </view>
            <view class="form-item">
              <text class="label">城市</text>
              <picker 
              mode="region"
              @change="onLocationChange"
              >

               <view>{{ profile.fullLocation || "请选择城市" }}</view>
              </picker>
            </view>
            <view class="form-item">
              <text class="label">职业</text>
              <!-- 输入框通过 v-model 双向绑定修改数据 -->
            <input placeholder="请填写职业" v-model="profile.profession" />
              </view>
              <!-- 提交按钮 -->
          <view class="button" @click="onUpdateProfile">保 存</view>
            </view>
        </scroll-view>
    </view>
</template>
<script setup>
import dayjs from "dayjs";
import { ref, watch } from "vue";
import { useUserStore, useCounterStore } from "@/store";
import { getProfileAPI, uploadPhotoAPI, updateProfileAPI  } from "@/api/profile";

const userStore= useCounterStore()
const userStoreMy= useUserStore()
const profile = ref({})
const end = ref('')

end.value = dayjs().format("YYYY-MM-DD");

const loadUserData = async () => {
    const { result } = await getProfileAPI()
    console.log(result);
    profile.value = result
}
loadUserData()

// 上传头像
const onUploadFile = async () => {
  const res = await uni.chooseMedia({
    // 限制数量为：1
    count: 1,
    // 限制上传的文件类型
    mediaType: ["image"],
  });
  console.log(res);
  const { data } = await uploadPhotoAPI(res.tempFiles[0].tempFilePath);
  profile.value.avatar = JSON.parse(data).result.avatar;
  userStoreMy.profile.avatar = profile.value.avatar
}
// 修改性别
const changeGender = (e) => {
 profile.value.gender = e.detail.value
}
// 修改生日
const changeBirthday = (e) => {
  profile.value.birthday = e.detail.value
}
// 修改城市
const onLocationChange = (e) => {
     const { code, value } = e.detail;
  // value 是前端展示的省市区 code是后台需要的编码
  profile.value.fullLocation = value.join("");
  // code 是传递给后端的编码
  profile.value.provinceCode = code[0];
  profile.value.cityCode = code[1];
  profile.value.countyCode = code[2];
}


// 发送更改数据的请求
const onUpdateProfile = async () => { 
  await updateProfileAPI(profile.value)
    uni.showToast({
    title: "更新成功",
    icon: "success",
    duration: 1500,
    });
  setTimeout(() => {
    uni.switchTab({ url: '/pages/my/my' });
  }, 1000);
}  

// 监听 侦听 你改变 我就做额外行为  nickname
watch(() => profile.value.nickname, () => {
  userStoreMy.profile.nickname = profile.value.nickname
});
</script>
<style lang="scss">
page {
    height: 100%;
    overflow: hidden;
    background-color: #f4f4f4;
}

.viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-image: url(https://static.botue.com/erabbit/static/images/order_bg.png);
    background-size: auto 392rpx;
    background-repeat: no-repeat;
}

.navbar {
    .title {
        height: 40px;
        line-height: 32px;
        text-align: center;
        font-size: 17px;
        font-weight: 500;
        color: #fff;
    }

    .back {
        position: absolute;
        left: 20rpx;
        top: 22px;
        font-size: 23px;
        z-index: 9;
        color: #fff;
    }
}

.avatar {
    text-align: center;
    padding: 20rpx 0 40rpx;

    image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
    }

    text {
        display: block;
        padding-top: 20rpx;
        line-height: 1;
        font-size: 26rpx;
        color: #fff;
    }
}

.form {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .form-item {
        display: flex;
        height: 96rpx;
        line-height: 46rpx;
        padding: 25rpx 10rpx;
        background-color: #fff;
        font-size: 28rpx;
        border-bottom: 1rpx solid #ddd;

        &:last-child {
            border: none;
        }

        .label {
            width: 180rpx;
            color: #333;
        }

        input {
            flex: 1;
            display: block;
            height: 46rpx;
        }

        .radio {
            display: inline-block;
            height: 46rpx;
            margin-right: 20rpx;
            vertical-align: middle;
        }

        radio {
            transform: scale(0.7) translateY(-2px);
        }

        picker {
            flex: 1;
        }
    }
}

.button {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
}</style>